<template>
  <div class="box">
    <nav>
      <p style="cursor: pointer">202小作坊</p>
      <div class="nav-container">
        <!-- <router-link to="/" class="nav-item">首页</router-link> -->
        <router-link to="" class="nav-item items_signIn" @click="handleSignIn" :style="{ color: isSigned ? '#4CAF50' : '' }">{{
          signInStatus
        }}</router-link>
        <!-- <router-link to="/notice" class="nav-item">公告</router-link> -->
        <!-- <router-link to="/profile" class="nav-item">个人中心</router-link> -->
      </div>
    </nav>

    <el-carousel :interval="5000" height="300px" class="carousel-container">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.image" :alt="item.title" class="carousel-image" />
        <div class="carousel-caption">{{ item.title }}</div>
      </el-carousel-item>
    </el-carousel>

    <!-- 功能卡片区域 -->
    <div class="feature-cards">
      <div class="feature-card">
        <div class="feature-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="feature-title">打卡记录</div>
        <div class="feature-desc">每日签到记录</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <el-icon><HelpFilled /></el-icon>
        </div>
        <div class="feature-title">请假申请</div>
        <div class="feature-desc">便捷的请假申请</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <el-icon><Files /></el-icon>
        </div>
        <div class="feature-title">办事服务</div>
        <div class="feature-desc">便捷的办事模式</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <el-icon><ChatDotRound /></el-icon>
        </div>
        <div class="feature-title">公告通知</div>
        <div class="feature-desc">更新公告信息</div>
      </div>
    </div>

    <!-- 政策详情区域 -->
    <div class="policy-section">
      <!-- 政策日历和列表区域 -->
      <div class="section-header">
        <h3 class="section-title">历史记录-公告 <span class="section-english">POLICY</span></h3>
      </div>

      <div class="policy-content-wrapper">
        <!-- 政策日历区域 -->
        <div class="policy-calendar-section">
          <el-calendar class="calendar-body" v-model="currentDate" :first-day-of-week="1">
            <template #date-cell="{ data }">
              <div class="calendar-cell">
                <span :class="['signin-mark', { 'signed': isSignedOnDate(data.day) }]"></span>
                <span class="date-text">{{ data.day.split('-').slice(2).join('-') }}</span>
              </div>
            </template>
          </el-calendar>
          <div class="legend">
            <div class="legend-item">
              <span class="legend-dot signed"></span>
              <span>已签到</span>
            </div>
          </div>
        </div>

        <!-- 政策列表 -->
        <div class="policy-list">
          <div v-for="n in notices" :key="n.noticeId" class="policy-list-item" @click="openNotice(n)">
            <div class="policy-tag">{{ n.noticeTitle.substring(0, 5) }}</div>
            <div class="policy-name">{{ n.noticeTitle.substring(5) }}</div>
            <div class="policy-date">{{ formatDate(n.createTime) }}</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="showNoticeDialog"
      :title="selectedNotice ? selectedNotice.noticeTitle : '公告详情'"
      width="600px"
      :before-close="handleCloseNotice"
    >
      <div v-if="selectedNotice" class="notice-detail">
        <div class="notice-detail-content" v-html="selectedNotice.noticeContent"></div>
        <div class="notice-detail-meta">发布于：{{ formatDate(selectedNotice.createTime) }}</div>
      </div>
      <template #footer>
        <el-button @click="showNoticeDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { ElCalendar, ElMessage } from 'element-plus';
import { listRecord } from '@/api/signIn/record/index';
import { listNotice } from '@/api/system/notice';
import { addRecord, getUserTaskSignInRecord, updateRecord } from '@/api/signIn/record';
import { listTaskForUser } from '@/api/signIn/task';
import { useUserStore } from '@/store/modules/user';

onMounted(async () => {
  // 拉取公告，不捕获错误，让上层或控制台看到异常
  const res = await listNotice({ pageNum: 1, pageSize: 6, noticeTitle: '', createByName: '', status: '', noticeType: '' });
  if (res && res.rows) notices.value = res.rows;
  await fetchUserTasks();
  await checkSignInStatus();
});

const formatDate = (ts: string) => (ts ? ts.substring(0, 10) : '');
const showNoticeDialog = ref(false);
const notices = ref<any[]>([]);
const selectedNotice = ref<any | null>(null);

const handleCloseNotice = () => {
  showNoticeDialog.value = false;
  selectedNotice.value = null;
};

const isSigned = ref(false);

// 用户/任务/签到状态
const userId = ref<number | string | undefined>(undefined);
const userStore = useUserStore();
const userTasks = ref<[]>([]);
const currentTask = ref<null>(null);
const isSigning = ref(false);

// 获取当前用户和任务（取第一条任务作为默认签到任务）
const fetchUserTasks = async () => {
  try {
    userId.value = userStore.userId;
    const res = await listTaskForUser(userId.value);
    if (res && res.rows) {
      userTasks.value = res.rows;
      // 如果没有选中任务，使用第一条
      if (!currentTask.value && res.rows.length > 0) {
        currentTask.value = res.rows[0];
      }
    }
  } catch (error) {
    console.error('获取用户任务失败', error);
  }
};

const checkSignInStatus = async () => {
  if (!userId.value) userId.value = userStore.userId;
  if (!currentTask.value && userTasks.value && userTasks.value.length > 0) {
    currentTask.value = userTasks.value[0];
  }
  if (!currentTask.value) return;
  try {
    const totalRes: any = await getUserTaskSignInRecord(userId.value, currentTask.value.id);
    const datTime = ref(new Date().toLocaleString().substring(11));
    if (totalRes && totalRes.total >= 1) {
      isSigned.value = true;
      // 如果已有两条记录，视为已签退
      if (totalRes.rows[0].remark == 2) {
        signInStatus.value = `已签退：` + datTime.value;
      } else {
        signInStatus.value = `已签到：` + datTime.value;
      }
    } else {
      isSigned.value = false;
      signInStatus.value = '签到';
    }
  } catch (error) {
    console.error('检查签到状态失败', error);
  }
};

const handleSignIn = async () => {
  if (!userId.value) userId.value = userStore.userId;
  if (!currentTask.value && userTasks.value && userTasks.value.length > 0) {
    currentTask.value = userTasks.value[0];
  }
  isSigning.value = true;
  try {
    const totalRes: any = await getUserTaskSignInRecord(userId.value, currentTask.value.id);

    if (totalRes.total < 1) {
      // 签到
      await addRecord({ userId: userId.value, taskId: currentTask.value.id });
      ElMessage({ message: '签到成功', type: 'success' });
    } else if (totalRes.total >= 1) {
      const id = totalRes.rows[0].id;
      // 签退（创建第二条记录）
      await updateRecord({ id: id, userId: userId.value, updateTime: new Date().toISOString(), remark: 2 });
      console.log(new Date().toISOString());
      ElMessage({ message: '签退成功', type: 'success' });
    }
    // 更新状态
    await checkSignInStatus();
  } catch (error) {
    ElMessage.error('操作失败，请重试');
    console.error('签到/签退错误', error);
  } finally {
    isSigning.value = false;
  }
};

const openNotice = (item: any) => {
  if (!item) return;
  // 在当前页面弹出公告详情对话框而不是跳转
  selectedNotice.value = item;
  showNoticeDialog.value = true;
};

const carouselItems = ref([
  {
    id: 1,
    title: '',
    image: '/banner/1.jfif'
  },
  {
    id: 2,
    title: '',
    image: '/banner/2.png'
  }
]);

const signInStatus = ref('签到');
const signedDates = ref<Set<string>>(new Set());

// 当前日期（用于日历组件）
const currentDate = ref(new Date());

const fetchSignedDates = async () => {
  try {
    const year = currentDate.value.getFullYear();
    const month = currentDate.value.getMonth() + 1;
    const res = await listRecord({userId: userStore.userId});

    // 清空现有记录
    signedDates.value.clear();

    // 添加新记录到集合
    if (res && res.rows) {
      res.rows.forEach((record: any) => {
        // 格式化日期为 YYYY-MM-DD 格式
        const date = new Date(record.createTime);
        // 只添加当前月份的签到记录
        if (date.getFullYear() === year && date.getMonth() + 1 === month) {
          const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
          signedDates.value.add(formattedDate);
        }
      });
      console.log('日历签到数据:', res.rows);
    }
  } catch (error) {
    console.error('获取签到记录失败', error);
  }
};

// 检查指定日期是否已签到
const isSignedOnDate = (dateString: string) => {
  console.log(dateString);
  return signedDates.value.has(dateString);
};

// 监听日期变化，重新获取签到记录
watch(currentDate, () => {
  fetchSignedDates();
});

// 组件挂载时获取初始数据
fetchSignedDates();
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, #f0f9ff 0%, #ffffff 100%);
  overflow-y: auto;
}

.carousel-container {
  width: 100%;
  // margin: 20px auto;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

.items_signIn {
  border: 0;
  background: transparent !important;
}

// 主标题区域样式
.main-title-section {
  width: 100%;
  padding: 30px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image: url('/banner/background.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  margin-top: 20px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.8) 0%, rgba(0, 191, 255, 0.8) 100%);
  }
}

// 政策内容包装器样式
.policy-content-wrapper {
  display: flex;
  width: 100%;
  margin-top: 20px;
  gap: 20px;
}

// 政策日历区域样式
.policy-calendar-section {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// 政策列表样式
.policy-list {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  position: relative;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

h2 {
  position: relative;
  font-size: 32px;
  color: #ffd700;
  margin-bottom: 30px;
}

.policy-banner {
  position: relative;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 20px;
  margin-bottom: 20px;

  .policy-text {
    font-size: 16px;
    font-weight: bold;
  }

  .policy-subtext {
    font-size: 14px;
  }
}

.view-policy-btn {
  position: relative;
  background: #ffd700;
  border-color: #ffd700;
  color: #1a365d;
  font-weight: bold;
  padding: 8px 24px;

  &:hover {
    background: #ffed4e;
    border-color: #ffed4e;
    color: #1a365d;
  }
}

// 功能卡片区域样式
.feature-cards {
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
  gap: 20px;

  .feature-card {
    flex: 1;
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: #e6f7ff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 15px;
      font-size: 24px;
      color: #1890ff;
    }

    .feature-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .feature-desc {
      font-size: 14px;
      color: #666;
    }
  }
}

// 政策详情区域样式
.policy-section {
  width: 80%;
  margin: 0px auto;

  .section-header {
    margin-bottom: 30px;

    .section-title {
      font-size: 24px;
      font-weight: bold;
      position: relative;

      .section-english {
        font-size: 16px;
        font-weight: normal;
        color: #999;
        margin-left: 10px;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 150px;
        height: 3px;
        background: #1890ff;
      }
    }
  }

  // 政策卡片区域样式
  .policy-cards {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;

    .policy-card {
      flex: 1;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      text-align: center;

      .policy-card-icon {
        width: 50px;
        height: 50px;
        background: #e6f7ff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 15px;
        font-size: 20px;
        color: #1890ff;
      }

      .policy-card-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .policy-card-count {
        font-size: 24px;
        font-weight: bold;
        color: #1890ff;
      }

      .policy-card-badge {
        display: inline-block;
        background: #e6f7ff;
        color: #1890ff;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
      }
    }
  }

  // 日历组件样式
  .calendar-body {
    border-radius: 10px;
    padding: 13px;
  }

  .calendar-cell {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .signin-mark {
    position: absolute;
    bottom: -10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
  }

  .signin-mark.signed {
    background: #4caf50;
    opacity: 1;
  }

  .date-text {
    font-size: 14px;
    color: #333;
  }

  .legend {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
  }

  .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
  }

  .legend-dot.signed {
    background: #4caf50;
  }

  // 政策列表内部样式
  .policy-list-item {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
  }

  .policy-list-item:hover {
    transform: translateX(5px);
  }

  .policy-list-item:last-child {
    border-bottom: none;
  }

  .policy-tag {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 15px;
    min-width: 60px;
    text-align: center;
  }

  .policy-tag:contains('申报中') {
    background-color: #e6f7ff;
    color: #1890ff;
  }

  .policy-tag:contains('即将开始') {
    background-color: #f6ffed;
    color: #52c41a;
  }

  .policy-tag:contains('已截止') {
    background-color: #fff1f0;
    color: #ff4d4f;
  }

  .policy-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .policy-date {
    font-size: 12px;
    color: #999;
    margin-left: 15px;
  }
}

nav {
  width: 100%;
  height: 60px;
  padding: 10px 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    float: left;
    // text-align: center;
    padding: 15px;
    font-size: 38px;
    font-family: 'Cascadia Code SemiBold';
    color: cornflowerblue;
  }

  .nav-container {
    display: flex;
    gap: 20px;

    .nav-item {
      color: #666;
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 4px;
      transition: all 0.3s ease;
      font-size: 16px;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
      }

      &.router-link-active {
        background: #1890ff;
        font-weight: 500;
      }
    }
  }
}
</style>
